<template>
  <page-container :title="route.meta.title">
    <div class="header">
      <div class="header-Left">
        <a-spin tip="加载中..." :spinning="spinning">
          <div v-if="xianLeft === 1" class="header-Left-bottom">
            <text>请先输入手机号进行查询</text>
          </div>

          <div v-else-if="xianLeft === 2" class="header-Left-bottom">
            <a-empty />
          </div>

          <div v-else style="height: 100vh; width: 100%">
            <vue3-tree-org
              :data="dataList"
              center
              :horizontal="horizontal"
              :collapsable="collapsable"
              :label-style="style"
              :only-one-node="onlyOneNode"
              :clone-node-drag="cloneNodeDrag"
              :before-drag-end="beforeDragEnd"
              @on-node-drag="nodeDragMove"
              @on-node-drag-end="nodeDragEnd"
              @on-contextmenu="onMenus"
              @on-expand="onExpand"
              @on-node-dblclick="onNodeDblclick"
              @on-node-click="onNodeClick"
            />
          </div>

          <div
            v-if="xianLeft === 3"
            style="display: flex; position: absolute; top: 15px; left: 15px"
          >
            <div style="margin-right: 10px">
              <a-switch v-model:checked="horizontal" />
              竖向
            </div>
            <div style="margin-right: 10px">
              <a-switch v-model:checked="collapsable" />
              可收起
            </div>
          </div>
        </a-spin>
      </div>

      <div class="header-Right">
        <a-card>
          <div>
            <a-form
              :model="formState"
              name="horizontal_login"
              layout="inline"
              autocomplete="off"
              @finish="onFinish"
            >
              <a-form-item label="手机号" name="phone">
                <a-input
                  @change="getChange"
                  v-model:value.number="formState.phone"
                  placeholder="请输入"
                  :maxlength="11"
                  allowClear
                ></a-input>
              </a-form-item>

              <a-form-item>
                <a-button :disabled="disabled" type="primary" html-type="submit">搜索</a-button>
              </a-form-item>
            </a-form>
          </div>

          <div class="header-Right-body">
            <a-empty />
          </div>
        </a-card>
      </div>
    </div>
  </page-container>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRoute } from 'vue-router'
import * as accountApi from '@/api/account'

const spinning = ref(false)

const xianLeft = ref(1) // 1:显示输入手机号  2：没有数据  3:查到了

const route = useRoute()

interface FormState {
  phone: string
}

const formState = reactive<FormState>({
  phone: '',
})

const getChange = (val: any) => {
  if (!val.target.value) {
    xianLeft.value = 1

    dataList.value = {}
  }
}

/** 点击搜索 */
const onFinish = (values: any) => {
  shows()
}

const DiGui = async (data: any, num = 0) => {
  data.label = data.userName
  data.id = Number(data.userId)
  data.disabled = true

  if (formState.phone == data.label) {
    data.style = { color: '#fff', background: '#108ffe' }
  }

  if (num !== 0) {
    data.pid = num
  }

  if (data.children && data.children.length !== 0) {
    // num++
    DiGui(data.children, data.id)

    data.children = [data.children]

    data.children.push({
      children: [],
      id: data.userId - 1,
      label: '其他',
    })
  }
}

const shows = async () => {
  spinning.value = true
  try {
    const result = await accountApi.getChaPedigree({ userName: formState.phone })
    spinning.value = false

    if (result.state === 200) {
      if (result.data) {
        if (formState.phone == result.data.userName) {
          result.data.style = { color: '#fff', background: '#108ffe' }
        }

        DiGui(result.data).then(res => {
          xianLeft.value = 3
          dataList.value = result.data
        })
      } else {
        xianLeft.value = 2
      }
    } else {
      xianLeft.value = 2
      dataList.value = {}
    }
  } catch (error) {
    spinning.value = false
  }
}

const disabled = computed(() => {
  return !formState.phone
})

const horizontal = ref(false)
const collapsable = ref(false)
const onlyOneNode = ref(false)
const expandAll = ref(false)
const cloneNodeDrag = ref(true)

const style = reactive({
  width: '100%',
  background: '#fff',
  color: '#5e6d82',
})

const dataList = ref({})

const onMenus = ({ node, command }) => {
  console.log(node, command)
}
const onExpand = (e: any, data: any) => {
  console.log(e, data)
}

const nodeDragMove = (data: any) => {
  console.log(data)
}

const beforeDragEnd = (node: any, targetNode: any) => {
  return new Promise((resolve, reject) => {
    if (!targetNode) reject()
    if (node.id === targetNode.id) {
      reject()
    } else {
      // resolve();
    }
  })
}

const nodeDragEnd = (data: any, isSelf: any) => {
  console.log(data, isSelf)
}
const onNodeDblclick = () => {
  console.log('onNodeDblclick')
}
const onNodeClick = (e: any, data: any) => {
  console.log(e, data)
  // ElMessage.info(data.label);
}
</script>
<style lang="less" scoped>
.ant-spin-nested-loading {
  width: 100%;
}
.header {
  width: 100%;
  display: flex;
  min-height: 750px;
  flex-direction: row;
  justify-content: space-between;
  background-color: #fff;
  margin-bottom: 15px;

  .header-Left {
    width: 49%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 750px;
    .header-Left-bottom {
      font-size: 18px;
      font-weight: bold;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  .header-Right {
    width: 49%;
    height: 100%;
    display: flex;
    flex-direction: column;
    margin: 15px;
    .header-Right-body {
      width: 100%;
      // height: 100%;
      min-height: 550px;
      margin-top: 30%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>
